<template>
  <div class='wide book not-single' id='not-app-article'>
    <main class='site-main' role='main'>
      <header class='page-header'>
        <h1 class='post-title uppercase'>阅读记录</h1>
        <div class='taxonomy-des'>
          <p>世界太大，别人的路是参考，不是标准。</p>
        </div>
      </header>
      <article class='book-contain'>
        <ul class='book-list' v-for='(item,index) in bookList'>
          <li class='book-item'>
            <span v-if='item.isRecommend' class='book-recommend'>荐</span>
            <a class='book-item-link' :href='item.bookUrl' target='_blank' role="button"></a>
            <div class='book-item-container'>
              <!-- 书籍序号 -->
              <p class='book-item-index'>{{ index + 1 }}</p>
              <!-- 书籍封面 -->
              <div class='book-item-cover'>
                <img :src='item.bookCover' alt='书籍封面'>
              </div>
              <!-- 书籍信息 -->
              <div class='book-item-info'>
                <!-- 书籍名称 -->
                <p class='book-item-title'>{{ item.bookName }}</p>
                <!-- 书籍作者 -->
                <p class='book-item-author'>{{ item.bookAuthor }}</p>
                <!-- 书籍推荐值 -->
                <p class='book-item-reading'>
                  <span class='book-item-readingText'>
                    推荐值 &nbsp;
                    <span class='book-item-reading-percent'>
                      {{ item.bookRate }}
                    </span>
                  </span>
                  <img v-if='item.bookRate >= 4.5'
                       class='book-rating-item'
                       src='https://weread-1258476243.file.myqcloud.com/miniprogram/assets/reader/newRatings_900.png'
                       alt='神作' referrerpolicy='no-referrer'>
                  <img v-if='item.bookRate < 4.5 && item.bookRate >= 4.25'
                       class='book-rating-item'
                       src='https://weread-1258476243.file.myqcloud.com/miniprogram/assets/reader/newRatings_850.png'
                       alt='好评如潮' referrerpolicy='no-referrer'>
                  <img v-if='item.bookRate < 4.25 && item.bookRate >= 4'
                       class='book-rating-item'
                       src='https://weread-1258476243.file.myqcloud.com/miniprogram/assets/reader/newRatings_800.png'
                       alt='脍炙人口' referrerpolicy='no-referrer'>
                  <img v-if='item.bookRate < 4 && item.bookRate >= 3'
                       class='book-rating-item'
                       src='https://weread-1258476243.file.myqcloud.com/miniprogram/assets/reader/newRatings_700.png'
                       alt='值得一读' referrerpolicy='no-referrer'>
                  <img v-if='item.bookRate < 3'
                       class='book-rating-item'
                       src='https://weread-1258476243.file.myqcloud.com/miniprogram/assets/reader/newRatings_600.png'
                       alt='褒贬不一' referrerpolicy='no-referrer'>
                </p>
                <!-- 书籍描述 -->
                <p class='book-item-desc'>{{ item.bookProfile }}</p>
              </div>
            </div>
          </li>
        </ul>
      </article>
    </main>
    <Paginator
      :pageSize='pagination.size'
      :pageTotal='pagination.total'
      :page='pagination.current'
      @pageChange='pageChangeHanlder' />
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import api from '@/api/api'
import Paginator from '@/components/Paginator.vue'
import { useUserStore } from '@/stores/user'

export default defineComponent({
  name: 'Book',
  components: { Paginator },
  setup() {
    const userStore = useUserStore()
    const pagination = reactive({
      size: 6,
      total: 0,
      current: 1
    })
    const reactiveData = reactive({
      bookList: [] as any,
      bookTag: [] as any
    })
    onMounted(() => {
      getBookList()
    })
    const getBookList = () => {
      api.getBookList({
        current: pagination.current,
        size: pagination.size
      }).then(({ data }) => {
        reactiveData.bookList = data.data.records
        pagination.total = data.data.count
        reactiveData.bookTag = data.data.records.bookTags
      })
    }
    const toPageTop = () => {
      window.scrollTo({
        top: 0
      })
    }
    const pageChangeHanlder = (current: number) => {
      toPageTop()
      pagination.current = current
      getBookList()
    }
    return {
      ...toRefs(reactiveData),
      pagination,
      pageChangeHanlder
    }
  }
})
</script>

<style scoped>
.book-content > img {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: var(--radius);
}

.book-contain {
    font-family: var(--top-font-family);
}

.book-list, .book-item {
    list-style: none;
}

.book-item {
    list-style: none;
    position: relative;
    background: rgba(52, 167, 255, 0.07);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.book-recommend {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px 16px;
    background-color: #3b70fc;
    box-shadow: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
    color: #F8E18F;
    z-index: 1;
    border-radius: 12px 0 12px 0;
    transition: 0.3s;
}

.book-item-link {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.book-item-container {
    display: flex;
    align-items: center;
    padding: 20px 0;
    overflow: hidden;
}

.book-item-index {
    margin: 0 0 8px;
    flex-shrink: 0;
    width: 76px;
    font-size: 20px;
    text-align: center;
    color: #b2b4b8;
}

.book-item-index, .book-item-reading-percent {
    font-family: TSans;
}

.book-item-cover {
    display: block;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    background: #d8d8d8;
    position: relative;
    flex-shrink: 0;
    width: 108px;
    height: 156px;
}

.book-item-cover > img {
    vertical-align: top;
    width: 100%;
    height: 100%;
    background-color: #d8d8d8;
    object-fit: cover;
    border-radius: 0;
}

.book-item-info {
    flex: 1;
    padding: 0 32px;
}

.book-item-title {
    padding-right: 90px;
    font-size: 18px;
    line-height: 26px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-text-size-adjust: none;
    height: auto;
    max-height: 52px;
}

.book-item-author {
    margin-top: 10px;
    font-size: 14px;
    line-height: 21px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-text-size-adjust: none;
    height: auto;
    max-height: 21px;
}

.book-item-reading {
    display: flex;
    align-items: center;
    margin-top: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: normal;
}

.book-item-readingText {
    font-size: 14px;
}

.book-item-reading-percent {
    font-style: normal;
    font-size: 15px;
}

.book-rating-item {
    height: 22px;
    margin: 0;
    margin-left: 8px;
}

.book-item-desc {
    margin-top: 8px;
    font-size: 14px;
    color: #8a8c90;
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-text-size-adjust: none;
    height: auto;
    max-height: 44px;
}
</style>
